<template>
	<view class="">
		<!-- 各组件页面 -->
		<view class="module">
			<view :style="{ display: current == 0 ? 'block' : 'none' }">
				<at-page1 ref="page1"></at-page1>
			</view>
			<view :style="{ display: current == 1 ? 'block' : 'none' }">
				<at-page2 ref="page2"></at-page2>
			</view>
			<view :style="{ display: current == 2 ? 'block' : 'none' }">
				<at-page3 ref="page3"></at-page3>
			</view>
			<view :style="{ display: current == 3 ? 'flex' : 'none' }">
				<at-page4 ref="page4"></at-page4>
			</view>
			<view :style="{ display: current == 4 ? 'flex' : 'none' }">
				<at-page5 ref="page5"></at-page5>
			</view>
		</view>
		
		<!-- tabbar组件 -->
		<view class="at-tab-bar">
			<view class="placeholder" v-if="fixedBottom"></view>
			<view class="bar h-flex-x h-flex-5" :class="{'fixed':fixedBottom}">
				<view class="item" v-for="(item,index) in  tabList" :key="index" :class="{'active':current == index,'recover':prevIndex == index}" @tap="change(index)">
					<view>
						<view class="h-flex-x h-flex-center">
							<image style="width: 48rpx;height: 48rpx;" :src="item.icon" mode=""></image>
						</view>
						<view class="h-flex-x h-flex-center">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import atPage1 from '@/components/at-page/at-page1.vue';
	import atPage2 from '@/components/at-page/at-page2.vue';
	import atPage3 from '@/components/at-page/at-page3.vue';
	import atPage4 from '@/components/at-page/at-page4.vue';
	import atPage5 from '@/components/at-page/at-page5.vue';

	export default {
		// 翻滚切换方式
		name: "atTabBarRoll",
		props: {
			// 固定底部
			fixedBottom: {
				type: Boolean,
				default: true
			}
		},
		components: {
			"at-page1":atPage1,
			"at-page2":atPage2, 
			"at-page3":atPage3, 
			'at-page4':atPage4, 
			"at-page5":atPage5, 
		},
		data() {
			return {
				prevIndex: -1,
				current: 0,
				tabList: [{
						"icon": "../../static/tabbar/home_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "首页"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚1"
					},
					{
						"icon": "../../static/tabbar/order_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚2"
					},
					{
						"icon": "../../static/tabbar/store_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚3"
					},
					{
						"icon": "../../static/tabbar/my_no.png",
						"iconSelected": "../../static/tabbar/home.png",
						"text": "翻滚4"
					},
				],
			};
		},
		methods: {
			change(index) {
				console.log(index);
				let that = this;
				if (that.current == index) return;
				that.prevIndex = that.current;
				that.current = index;
				
				if (that.current == 0) {
					that.$refs.page1.ontrueGetList();
				} else if (that.current == 1) {
					that.$refs.page2.ontrueGetList();
				} else if (that.current == 2) {
					that.$refs.page3.ontrueGetList();
				} else if (that.current == 3) {
					that.$refs.page4.ontrueGetList();
				} else if (that.current == 4) {
					that.$refs.page5.ontrueGetList();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./at-flex.scss";
	@import "./tab-bar.scss";
	
	.module{
		display: flex;
		align-items: center;
		justify-content: center;
		// background: pink;
	}
	.at-tab-bar {
		padding: 30rpx 0 0;
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #82a9f2;
		.item {
			height: 100rpx;
			position: relative;
			overflow: hidden;

			>view {
				height: 200%;

				>view {
					height: 50%;
					color: #0043e3;
					font-size: 30rpx;
				}
			}

			&.active {
				&::before {
					content: '';
					display: block;
					position: absolute;
					width: 90rpx;
					height: 90rpx;
					box-sizing: border-box;
					border-color: #0043e3;
					border-style: solid;
					border-width: 2px;
					border-radius: 50%;
					top: 5rpx;
					left: 50%;
					margin-left: -45rpx;
					z-index: 1;

					animation: scale 0.3s ease 0s 1 normal;
					animation-fill-mode: forwards;
				}

				&::after {
					content: '';
					display: block;
					background-color: #0043e3;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					position: absolute;
					bottom: 3px;
					left: 50%;
					margin-left: -2px;
					z-index: 2;
					opacity: 0;

					animation: fide-in 0.5s ease 0.3s 1 normal;
					animation-fill-mode: forwards;
				}

				>view {
					animation: translate 0.4s ease 0.3s 1 normal;
					// transform:translateY(-100rpx);
					animation-fill-mode: forwards;
				}
			}

			&.recover {
				>view {
					animation: recover 0.3s ease 0s 1 normal;
				}
			}
		}
	}

	// 恢复默认
	@keyframes recover {
		from {
			transform: translateY(-100rpx);
		}

		to {
			transform: translateY(0);
		}
	}

	// 转换移动
	@keyframes translate {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-100rpx);
		}
	}

	// 圆圈缩放
	@keyframes scale {
		0% {
			transform: scale(0, 0);
			opacity: 0;
			border-width: 2px;
		}

		50% {
			opacity: 0.5;
			border-width: 5px;
		}

		100% {
			transform: scale(0.95, 0.95);
			opacity: 0;
			border-width: 0px;
		}
	}

	// 淡入
	@keyframes fide-in {
		from {
			transform: scale(0, 0);
			opacity: 0;
		}

		to {
			transform: scale(1, 1);
			opacity: 1;
		}
	}
</style>